<template>
  <u-number-box bgColor="transparent" :disabled="disabled" :min="min" :max="max" disabledInput :value="value" @input="handleChange" @overlimit="overlimit">
    <view class="minus" slot="minus">
      <text class="iconfont icon-minus"></text>
    </view>
    <view :class="['plus',max === value ? 'noColor' :'']" slot="plus">
      <text :class="['iconfont', 'icon-plus' ]"></text>
    </view>
  </u-number-box>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
    },
    min: {
      type: Number
    },
    max: {
      type: Number
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleChange(e) {
      this.$emit('change', e);
      this.$emit('input', e)
    },
    overlimit(e) {
      console.log(e, "7554546")
      if (e === 'plus'){
          this.$toast.info('当前已达最大数量');
      }
      if (e === 'minus'){
          this.$toast.info('当前已达最小数量');
      }
      this.$emit('overlimit', e)
    },
  }
}
</script>

<style lang="scss" scoped>
$minus-main-color:$bg-color;
$minus-close-color:$color-disabled;

.minus {
  border-color: $minus-close-color;
  color: $minus-close-color
}

.plus {
  border-color: $minus-main-color;
  background-color: $minus-main-color;
  color: #FFFFFF;
}

.minus, .plus {
  width: 40rpx;
  height: 40rpx;
  border-width: 2rpx;
  border-style: solid;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;

  .iconfont {
    font-size: 28rpx;
  }
}

.noColor {
  background: #f7f8fa !important;
  border-color: #f7f8fa;
}
</style>